<template>
	<view class="container">
		<view class="logo">
			<image v-if="clientInfo.logo" :src="clientInfo.logo"></image>
		</view>
		<view class="form">
			<view class="account">
				<u-icon name='account' size='36rpx' color='#333333'></u-icon>
				<input v-model="form.phone" type="text" placeholder="请输入您的账号"></input>
			</view>
			<view class="pwd account">
				<u-icon name='lock' size='36rpx' color='#333333'></u-icon>
				<input v-model="form.pwd" type="text" placeholder="请输入您的密码" password v-if="otype">
				<input v-model="form.pwd" type="text" placeholder="请输入您的密码" v-else>
				<i @tap="openEye" :class="open?'open':'close'"></i>
			</view>
			<view class="btn" @tap="submit">登录</view>
			<view class="bottom">
				<text class="" @click="resetPasswordTap">忘记密码？</text>
				<text class="" @click='regTap'>免费注册</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		user
	} from '@/api/user.js'
	import {
		common
	} from '@/api/common.js'
	import md5 from 'js-md5'
	export default{
		components: {
			
		},
		data() {
			return {
				code: '',
				open: false,
				otype: true,
				form: {},
				firstRegister: '0',
				clientInfo: {}
			}
		},
		onShow() {
			this.form.phone = this.$storage.getStorageDataSync('phone')
			this.clientInfo = this.$storage.getStorageDataSync(this.$store.state.clientname)
		},
		onLoad(option) {
			//跳转过来的界面的url
			if(option.url && option.key){
				this.url = option.url
				this.key = option.key
			}
			// #ifdef MP-WEIXIN
			this.getCode()
			// #endif
		},
		methods:{
			closePopUp() {
				this.$refs.privacyAgreementPopUp.close()
			},
			getCode() {
				var that = this
				uni.login({
					provider: uni.getProvider,
					success: function(loginRes) {
						that.code = loginRes.code
					},
				})
			},
			submit(){
				if (!this.form.phone) {
					uni.showToast({
						title: '请输入有效账号',
						icon: 'none'
					})
				} else if (!this.form.pwd) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
				}else{
					uni.showLoading({
						title: '登录中...'
					});
					// console.log('pwd', md5(this.form.pwd))
					user.phoneLogin({
						phone: this.form.phone,
						password: md5(this.form.pwd),
						code: this.code
					}).then(res => {
						uni.hideLoading()
						if (res.data.code == 10000) {
							uni.showToast({
								title: '登录成功',
							})
							this.$storage.setStorageDataSync(this.$store.state.token, res.data.data.token)
							// 获取并缓存openId
							this.storageMiniProOpenId()
							this.getUserInfo()
						}
					})
				}
			},
			// 获取openId
			storageMiniProOpenId(){
				var _this = this
				// #ifdef MP-WEIXIN
				//登录成功之后，进行微信授权登录，并向后台获取openId，且缓存到本地
				uni.login({
					provider: 'weixin',
					scopes: 'auth_base',
					success: function (loginRes) {
						common.getOpenId({code: loginRes.code}).then(res => {
							if(res.data.data.openid){
								_this.$storage.setStorageDataSync("OPENID", res.data.data.openid)
							}
						})
				   },
				})
				// #endif
				// #ifdef MP-ALIPAY
				uni.login({
					provider: 'alipay',
					scopes: 'auth_base',
					success: function (loginRes) {
						common.getOpenId({code: loginRes.code}).then(res => {
							// if(res.data.data.openid){
							if(res.data.data.aliUserId){
								_this.$storage.setStorageDataSync("OPENID",res.data.data.aliUserId)
							}
						})
				   },
				})
				// #endif
			},
			getUserInfo(){
				user.getUserInfo().then(res => {
					if (res.data.code == 10000) {
						this.$storage.setStorageDataSync(this.$store.state.userInfo, res.data.data)
						if(this.$Route.query.toName){
							this.$Router.replace({
								name: this.$Route.query.toName,
								params: this.$Route.query.query
							})
						}else{
							uni.navigateBack()
						}
					}
				})
			},
			//密码可视
			openEye(){
				this.open = !this.open
				if(this.open==true){
					this.otype = false
				}else{
					this.otype = true
				}
			},
			resetPasswordTap(){
				uni.navigateTo({
					url: './reg?scene=resetPwd'
				})
			},
			regTap(){
				if(this.$Route.query.query.parentCode){
					uni.navigateTo({
						url: './reg?parentCode=' + this.$Route.query.query.parentCode
					})
				}else{
					uni.navigateTo({
						url: './reg?scene=reg',
					})
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		background-color: #FFF;
		height: 100vh;
	}
	.hr{
		height: 50upx;
	}
	.login_back{
		width: 25px;
		height: 25px;
		padding: 10px;
	}
	.logo{
		text-align: center;
		margin: 0 auto;
		padding-top: 150upx;
	}
	.logo image{
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}
	.title{
		font-size: 34upx;
		color: #666666;
		font-family: '黑体';
		font-weight: bold;
		text-align: center;
		margin-top: 40upx;
	}
	i{
		display: block;
		width: 40upx;
		height: 40upx;
		background: #000000;
		z-index: 888;
	}
	.form .account{
		width: 582upx;
		height: 68upx;
		margin: 0 auto;
		margin-top: 129upx;
		display: flex;
		align-items: center;
		position: relative;
		border-bottom: 1upx solid #EFEFEF;
	}
	.form .pwd{
		width: 582upx;
		height: 68upx;
		margin: 0 auto;
		margin-top: 36upx;
		display: flex;
		align-items: center;
		position: relative;
		border-bottom: 1upx solid #EFEFEF;
	}
	.close{
		position: absolute;
		right: 0;
		top: 15upx;
		background: url(https://ky.railshj.cn/protocol/st12306/openEye.png) no-repeat;
		background-size: 100% 20upx;
		background-position: center;
	}
	.open{
		position: absolute;
		right: 0;
		top: 15upx;
		background: url(https://ky.railshj.cn/protocol/st12306/closeEye.png) no-repeat;
		background-size: 100% 20upx;
		background-position: center;
	}
	input{
		width: 100%;
		padding-left: 20upx;
		// padding-top: 10upx;
		font-size: 28upx;
		// background-color: #007AFF;
		// height: 80rpx;
	}
	
	.btn{
		width: 90vw;
		height: 92upx;
		text-align: center;
		line-height: 92upx;
		border-radius: 11upx;
		font-size: 34upx;
		color: #fff;
		background-color: #DD4949;
		margin: 100upx auto 0;
	}
	.bottom{
		margin-top: 40rpx;
		margin-left: 40rpx;
		width: 670rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		text{
			color: $st-color-primary;
			padding: 10rpx;
		}
	}
	.soon{
		display: flex;
		justify-content: space-between;
		width: 553upx;
		margin-top: 31upx;
		margin: 0 auto;
	}
	.soon p{
		font-size:24upx;
		font-weight:400;
		margin-top: 30upx;
		color: #333333;
	}
	
	.other{
		min-height: 418upx;
		margin-top: 7upx;
	}
	.other .top{
		display: flex;
		width: 480upx;
		margin: 0 auto;
		justify-content: space-between;
	}
	.other .top h3{
		color: #565656;
		font-size: 26upx;
		margin-top: 115upx;
	}
	.other .xian{
		width: 135upx;
		height: 1upx;
		background: #D1D1D1;
		margin-top: 137upx;
	}
	
	.other .bottom{
		width: 435upx;
		margin: 35upx auto 0;
		display: flex;
		justify-content: space-between;
	}
	.other .bottom image{
		width: 67upx;
		height: 67upx;
	}
</style>
